<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="image-wrap"> <div class="img-content"> <img src="https://dummyimage.com/1920x1080/020c30/ffffff.png" alt=""> </div> <div class="overlay"></div> </div> <div class="banner-content"> <h1>MAKE THE BEST OF YOUR HTML EXPERIENCE WITH YOUR DAILY LIFE</h1> <div class="banner-btn"> <a href="" class="ban-btn btn-red">Featrures</a> <a href="" class="ban-btn btn-green">Doenload content</a> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Montserrat|Oswald'); body { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; } h1 { font-family: 'Oswald', sans-serif; } p { font-family: 'Montserrat', sans-serif; } .image-wrap { position: relative; width: 100%; height: 100vh; overflow-x: hidden; } .banner-content { position: absolute; z-index: 99999; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; text-align: center; font-size: 1.5em; color: #fff; line-height: 1.5; } .img-content img { width: 100%; height: 100vh; display: block; } .overlay { position: absolute; top: 0; left: 0; width: 100%; background: #530473; opacity: .8; z-index: 999; height: 100%; } .ban-btn { border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border-radius: 4px; } .btn-red { background-color: red; } .btn-green { background-color: #4CAF50; }